<template>
	<view class="index" :style="{ paddingTop: navBarHeight + 'px'}">
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
			<view class="titleNav">修水流动云平台</view>
		</view>
		<view class="top-info">
			<image mode="widthFix" src="/static/images/index/banner2.png" class="banner"></image>
			<view class="head">
				<image src="/static/images/mine/head2.png" class="head-img" v-if="info.sex==2"></image>
				<image src="/static/images/mine/head.png" class="head-img" v-else></image>
				<image mode="widthFix" src="/static/images/index/quan.png" class="quan"></image>
				<button v-if="info==''" style="padding: 0;" class="tab" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">点击登录</button>
				<view v-if="info!=''&&(last_apply==''||last_apply==null)" class="tab"
					@click="toUrl2('/pages/apply/apply')">流动申报
				</view>
				<view
					v-if="last_apply!=''&&last_apply!=null&&last_apply.status==3&&last_apply.bjtype==1&&info.status!=6"
					class="tab" @click="toUrl2('/pages/apply/apply')">流动申报
				</view>
				<view v-if="last_apply!=''&&last_apply!=null&&last_apply.status==2&&last_apply.bjtype==1" class="tab"
					@click="toUrl2('/pages/apply/apply')">流动申报
				</view>
				<view
					v-if="last_apply!=''&&last_apply!=null&&last_apply.status==3&&last_apply.bjtype==0&&info.status!=6"
					class="tab" @click="toUrl2('/pages/apply/apply')">流动申报
				</view>
				<!-- v-if="last_apply!=''&&last_apply!=null&&last_apply.status==3&&last_apply.bjtype==1" -->
			</view>
			<!-- <view class="head-btn">点击登录</view> -->
			<view class="infos" style="font-weight: bold;bottom: 50rpx;"
				v-if="last_apply.bjtype==1&&last_apply.status==2&&info!=''">
				状态：已返乡
			</view>
			<view class="infos" style="font-weight: bold;bottom: 100rpx;"
				v-if="info.status==5&&last_apply.status==1&&info!=''">
				状态：已提交流动申报
			</view>
			<view class="infos" style="font-weight: bold;bottom: 100rpx;"
				v-if="info.status==2&&last_apply.status==1&&info!=''">
				状态：已提交流动申报
			</view>
			<view class="infos" style="font-weight: bold;bottom: 80rpx;"
				v-if="info.status==5&&last_apply.status==3&&info!=''">
				状态：申报申请未通过，请重新申报
			</view>
			<view class="infos flex between" v-if="info!=''">
				<view class="infos-item" style="width: 20%;">
					<view class="item-name">{{info.realname}}</view>
				</view>
				<view class="infos-item" style="width: 80%;"
					v-if="info.out_organization_text!=''&&info.out_organization_text!=null">
					<view class="item-tit"></view>
					<view class="item-name">{{info.out_organization_text}}</view>
				</view>
			</view>
			<view style="top:94rpx;right: 61rpx;position: absolute;color: white;" v-if="info==''">
				<view style="font-size: 30rpx;margin-bottom: 10rpx;">登陆修水流动云平台</view>
				<view style="font-size: 24rpx;color: gainsboro;">体验更多服务</view>
			</view>
		</view>
		<view class="flex align new-tit" style="font-size: 32rpx;font-weight: bold;">
			<text></text>
			专属服务
		</view>
		<view class="nav-card flex align between wrap">
			<view class="nav-item" @click="toUrl2('/pages/apply/form_edit')">
				<image mode="heightFix" src="/static/images/index/icon4.png"></image>
				<view class="tit1">更新流向</view>
				<view class="tit2">变更居住地或工作单位</view>
			</view>
			<view class="nav-item" @click="toUrl2('/pages/activity/activity')">
				<image mode="heightFix" src="/static/images/index/icon5.png"></image>
				<view class="tit1">先锋创绩</view>
				<view class="tit2">自主参加活动学习记录</view>
			</view>
			<view class="nav-item" @click="toUrl2('/pages/suggest/record')">
				<image mode="heightFix" src="/static/images/index/icon7.png"></image>
				<view class="tit1">接诉即办</view>
				<view class="tit2">意见建议、建言献策</view>
			</view>
			<!-- message/message -->
			<view class="nav-item" @click="toUrl2('/pages/tencent/tencent')">
				<image mode="heightFix" src="/static/images/index/icon6.png"></image>
				<view class="tit1">云上板凳会</view>
				<view class="tit2">集合消息通知、视频会议</view>
			</view>

		</view>
		<!-- 	<view class="card flex align between">
			<view class="item" @click="toUrl('/pages/login/login')">
				<image src="/static/images/index/icon1.png" mode="heightFix"></image>
				<view style="color: #118E67;">登入注册</view>
			</view>
			<view class="item" @click="toUrl('/pages/apply/apply')">
				<image src="/static/images/index/icon2.png" mode="heightFix"></image>
				<view style="color: #428AF6;">流动申报</view>
			</view>
			<view class="item" @click="toUrl('/pages/suggest/suggest')">
				<image src="/static/images/index/icon3.png" mode="heightFix"></image>
				<view style="color: #BC2D00;">困难诉求</view>
			</view>
		</view> -->
		<view class="card" style="padding: 0;">
			<view class="new-tit flex align between">
				<view class="flex align tit">
					<text></text>
					工作动态
				</view>
				<view class="more" @click="toUrl('/pages/news/news')">更多</view>
			</view>
			<navigator :url="'/pages/news/detail?id='+item.id" hover-class="none" class="list flex between"
				v-for="(item,index) in list" :key="index">
				<image :src="'https://xsdy.ncscloudmedia.com'+item.cover" mode="aspectFill"></image>
				<view class="info flex wrap">
					<view class="name">{{item.title}}</view>
					<view class="time flex align between">
						<view>{{item.pv}}人阅读</view>
						<view>{{item.create_time}}</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>
<script>
	import {
		userDetail,
		articleQuery,
		wxlogin,
		userLogin
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				info: '',
				list: [],
				last_apply: '',
				statusBarHeight: 0,
				navBarHeight: 0
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
			if (systemInfo.platform === 'android') {
				this.navBarHeight = this.statusBarHeight + 48; // Android 导航栏高度
			} else {
				this.navBarHeight = this.statusBarHeight + 44; // iOS 导航栏高度
			}
		},
		onLoad() {
			this.getArticle()
		},
		methods: {
			getlocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						// 调用后端接口根据得到的经纬度获取地址
						console.log(res, "根据经纬度获取地址");
					},
					// 若用户点击拒绝获取位置则弹出提示
					fail: (err) => {
						console.log(err)
						uni.showModal({
							content: '检测到您没打开获取位置功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											uni.showToast({
												title: '授权后请重新打开此页面',
												icon: 'none'
											})
										},
										fail: (err) => {
											console.log(err)
										}
									})
								} else {
									uni.showToast({
										title: '获取地理位置授权失败',
										icon: 'none',
										success: () => {
											// 返回上一页
											setTimeout(() => {
												uni.showToast({
													title: "返回上一页",
													icon: 'none'
												})
												// uni.navigateBack({
												//   delta: 1
												// })
											}, 500)
										}
									})
								}
							}
						})
					},
				})
			},
			async getPhoneNumber(e) {
				if (e.detail.code != null) {
					this.getPhone(e.detail.code)
				}
			},
			getPhone(e) {
				let code2 = e
				console.log(code2)
				let that = this
				uni.login({
					provider: 'weixin',
					success(res) {
						console.log(res)
						let code1 = res.code
						uni.getUserInfo({
							provider: 'weixin',
							success: (res) => {
								console.log(res)
								var encryptedData = res.encryptedData;
								var iv = res.iv
								var info = res.rawData
								var obj = {
									code2: code2,
									code1: code1,
									iv: iv,
									encryptedData: encryptedData
								}
								that.toLogin(obj)
							},
							fail: res => {
								console.log(res)

							}
						})
					}
				})
			},
			async toLogin(obj) {
				const result = await userLogin(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
						icon: 'success',
						mask: true
					});
					uni.setStorageSync('token', 'Dearer ' + result.data.token);
					uni.setStorageSync('type', 1);
					this.getDetail()
					// uni.navigateTo({
					// 	url: '/pages/apply/apply'
					// })
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			// 订阅消息
			toBook() {
				let that = this
				wx.getSetting({
					withSubscriptions: true,
					success(res) {
						let templateId = "eAvm1oL34Z7_IVf4D7jblQsaWvXYCfR8lIKe31nft-0"; //替换为你的模板ID
						let subscriptionStatus = res.subscriptionsSetting[templateId];
						if (subscriptionStatus === "accept") {
							//用户已订阅
							console.log("用户已订阅");
						} else if (subscriptionStatus === "reject") {
							//用户拒绝订阅
							console.log("用户拒绝订阅");
							that.toBookCom()
						} else if (subscriptionStatus === "ban") {
							//订阅消息被封禁
							console.log("订阅消息被封禁");
							that.toBookCom()
						} else {
							//用户未订阅或未授权
							console.log("用户未订阅或未授权");
							that.toBookCom()
						}

					}

				});
			},
			toBookCom() {
				let id = "eAvm1oL34Z7_IVf4D7jblQsaWvXYCfR8lIKe31nft-0"; // 替换你自己的模板ID 模板详情那里就有模板ID
				// 调用订阅消息API
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: [id], // 这里填写你的模板ID数组
					success(res) {
						if (res[id] === 'accept') {
							// 用户同意订阅该模板
							uni.showToast({
								title: "订阅成功",
								icon: "success",
							});
						}
						if (res[id] === 'reject') {
							// 用户拒绝订阅该模板
							uni.showModal({
								title: "订阅失败",
								content: "您已设置不再询问，请前往设置开启订阅提醒。",
								confirmText: "去设置",
								success(modalRes) {
									if (modalRes.confirm) {
										that.openSetting();
									} else {
										uni.showToast({
											title: "您可能错过重要通知",
											icon: "none",
										});
									}
								},
							});
						}
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			openSetting(){
				 uni.openSetting({
				    success(res) {
				      console.log("设置界面返回：", res);
				      if (res.subscriptionsSetting) {
				        console.log("订阅消息授权状态：", res.subscriptionsSetting);
				      }
				    },
				    fail(err) {
				      console.error("打开设置失败：", err);
				    },
				  });
			},
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			},
			toUrl2(u) {
				// uni.showToast({
				// 	title: '请登录',
				// 	icon: 'error'
				// })
				// uni.showToast({
				// 	title: '请点击流动申报',
				// 	icon: 'error'
				// })
				// uni.navigateTo({
				// 	url: '/pages/apply/apply'
				// })
				let last_apply = this.last_apply //上个申诉
				let info = this.info //目前状态
				if (info == '') { //未登录
					uni.showToast({
						title: '请登录',
						icon: 'error'
					})
				} else {
					let status = this.info.status //目前状态
					if (last_apply == '' || last_apply == null) {
						if (u == '/pages/apply/apply') {
							uni.navigateTo({
								url: u
							})
						} else {
							uni.showToast({
								title: '请点击流动申报',
								icon: 'error'
							})
						}
					} else {
						let last_status = this.last_apply.status //上个申诉状态
						let bjtype = this.last_apply.bjtype //1:返乡 0:流动

						if (last_status == 1) { //审核中
							uni.showToast({
								title: '请耐心等待管理员审核',
								icon: 'error'
							})
						}
						if (last_status == 2) { //审核成功
							if (bjtype == 1) { //返乡
								if (u == '/pages/apply/apply') {
									uni.navigateTo({
										url: u
									})
								} else {
									uni.showToast({
										title: '请点击流动申报',
										icon: 'error'
									})
								}
							} else {
								uni.navigateTo({
									url: u
								})
							}

						}
						if (last_status == 3) { //审核未成功
							if (bjtype == 1) { //返乡
								if (u == '/pages/apply/form_edit') {
									uni.navigateTo({
										url: u
									})
								} else {
									uni.showToast({
										title: '请点击更新流向重新申请',
										icon: 'error'
									})
								}
							} else {
								if (info.status == 6) {
									uni.navigateTo({
										url: u
									})
								} else {
									if (u == '/pages/apply/apply') {
										uni.navigateTo({
											url: u
										})
									} else {
										uni.showToast({
											title: '请点击流动申报',
											icon: 'error'
										})
									}
								}

							}
						}
					}
				}

			},
			async getDetail() {
				const result = await userDetail()
				if (result.code == 1) {
					this.info = result.data
					let confirm = uni.getStorageSync('confirm')
					let confirm2 = uni.getStorageSync('confirm2')
					// 状态：待审核1 审核通过2 未通过3
					let last_apply = result.data.last_apply //上个申诉状态
					let status = result.data.status //目前状态
					if (last_apply == '' || last_apply == null) {
						// uni.navigateTo({
						// 	url: '/pages/apply/apply'
						// })
					} else {
						this.last_apply = result.data.last_apply
						let last_status = result.data.last_apply.status //上个申诉状态
						let bjtype = result.data.last_apply.bjtype //1:返乡 0:流动
						if (last_status == 1 && !confirm2) { //审核中
							uni.setStorageSync('confirm2', true);
							uni.showModal({
								title: '提示',
								content: '请耐心等待管理员审核',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						if (last_status == 2 && !confirm) { //审核成功
							uni.setStorageSync('confirm', true);
							let con = '申报审核成功'
							if (bjtype == 1) {
								con = '返乡审核成功'
							}
							uni.showModal({
								title: '提示',
								content: con,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						if (last_status == 3 && !confirm) { //审核未通过
							uni.setStorageSync('confirm', true);
							let con = '审核未通过，请重新申请'
							if (bjtype == 1) {
								con = '返乡审核未通过，请重新申请'
							}
							uni.showModal({
								title: '提示',
								content: con,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					}
					// this.toBook()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getArticle() {
				const result = await articleQuery({
					page: 1,
					size: 10,
					is_index: 1
				})
				if (result.code == 1) {
					this.list = result.data.list
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			}

		},
		onShow() {
			let token = uni.getStorageSync('token')
			let that = this
			uni.request({
				url: 'https://xsdy.ncscloudmedia.com/index.php/api/user/checkToken',
				data: {},
				method: 'POST',
				header: {
					'content-type': 'application/json',
					'token': token
				},
				success: result => {
					if (result.data.code == 1) {
						that.getDetail()
					} else {

					}
				},
				fail: result => {
					uni.hideLoading();
				}
			})
		},
		onReady() {

		},
		onShareAppMessage(res) {

		},
		onPageScroll(e) {

		},
		onReachBottom() {

		},

	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(to bottom, #FEEEE1, #FFFFFF);
	}

	.custom-navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FEEEE1;
		// box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		padding: 0 10px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 80;
	}

	.titleNav {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.top-info {
		margin: 60rpx 24rpx 20rpx;
		position: relative;
		padding-top: 30rpx;

		.banner {
			width: 100%;
			height: 200rpx;
		}

		.quan {}

		.head {
			position: absolute;
			top: -40rpx;
			left: 94rpx;
			text-align: center;

			.head-img {
				width: 170rpx;
				height: 170rpx;
			}

			.quan {
				width: 230rpx;
				height: 230rpx;
				position: absolute;
				left: -30rpx;
				top: -40rpx;
			}

			.tab {
				background: linear-gradient(to bottom, #FAD705, #FF6C02);
				border-radius: 40rpx;
				width: 200rpx;
				line-height: 48rpx;
				color: white;
				text-align: center;
				font-size: 30rpx;
				margin: 20rpx auto;
				font-weight: bold;
				// box-shadow: 1rpx 2rpx 6rpx 0rpx #2d2d2d;
			}
		}

		.head-btn {
			box-shadow: 1rpx 2rpx 6rpx 0rpx #2d2d2d;
			background: #FFB100;
			border-radius: 29rpx;
			width: 192rpx;
			line-height: 57rpx;
			color: white;
			text-align: center;
			font-size: 34rpx;
			position: absolute;
			top: 70rpx;
			right: 58rpx;
		}

		.infos {
			position: absolute;
			left: 10%;
			bottom: 90rpx;
			color: white;
			width: 80%;

			.item-tit {
				color: #FFCFC7;
				font-size: 20rpx;
			}

			.item-name {
				font-size: 28rpx;
				margin-top: 6rpx;
				text-shadow: 1rpx 2rpx 2rpx #565656;
			}
		}
	}


	.title {
		font-size: 48rpx;
		color: white;
		position: absolute;
		width: 100%;
		text-align: center;
		font-weight: bold;
		top: 100rpx;
	}

	.card {
		background: white;
		border-radius: 8rpx;
		box-shadow: 1rpx 1rpx 2rpx 1rpx gainsboro;
		margin: 22rpx 24rpx;
		padding: 26rpx;

		.item {
			font-size: 28rpx;
			text-align: center;
			flex: 1;

			image {
				width: 46rpx;
				height: 43rpx;
				margin-bottom: 10rpx;
			}
		}


		.list {
			padding: 20rpx 26rpx;
			border-bottom: solid 1rpx #DEDEDE;

			image {
				width: 194rpx;
				height: 148rpx;
			}

			.info {
				width: 65%;
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				width: 100%;
			}

			.time {
				color: #999999;
				font-size: 22rpx;
				width: 100%;
			}
		}
	}

	.new-tit {
		font-size: 28rpx;
		padding: 19rpx 24rpx;

		text {
			display: block;
			width: 9rpx;
			height: 35rpx;
			background: #FF9008;
			border-radius: 5rpx;
			margin-right: 16rpx;
		}

		.more {
			color: #FF9008;
			font-size: 24rpx;
		}
	}

	.nav-card {
		margin: 0 24rpx;

		.nav-item {
			background: white;
			border: solid 1rpx #FF9307;
			border-radius: 8rpx;
			padding: 21rpx 24rpx;
			width: 41%;
			margin-bottom: 24rpx;

			image {
				width: 62rpx;
				height: 63rpx;
			}

			.tit1 {
				font-size: 30rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.tit2 {
				font-size: 24rpx;
				color: #BBBBBB;
			}
		}
	}
</style>